<template>
  <a-modal
    v-model:visible="visible"
    :loading="loading"
    width="1000px"
    :footer="null"
  >
    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      :pagination="{ pageSize: 5 }"
      :scroll="{ y: 240 }"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'name'">
          <a>{{ text }}</a>
        </template>
      </template>
      <template #title>
        <a-button type="primary" danger @click="createChartsByEvent">
          生成事件统计图
        </a-button>
        <a-modal v-model:visible="evisible" :footer="null">
          事件统计图
          <div ref="main" style="width: 500px; height: 500px"></div>
        </a-modal>
      </template>
    </a-table>
  </a-modal>
</template>
<script setup>
import mitt from '@/mitt'
import { onUnmounted, inject, ref, reactive, onMounted } from 'vue'
import { QEvent } from '@/Hooks/QEvent'
import * as echarts from 'echarts'
const { map } = defineProps({
  map: {
    type: Object,
  },
})
const main = ref()
//导入数据和方法
const { queryBox, visible, loading, data, evisible } = QEvent()
const columns = [
  {
    title: '事件编号',
    dataIndex: '事件编号',
    width: 140,
  },
  {
    title: '事件类型',
    dataIndex: '事件类型',
  },
  {
    title: '事件等级',
    dataIndex: '事件等级',
  },
  {
    title: '发生时间',
    dataIndex: '发生时间',
  },
  {
    title: '发生地点',
    dataIndex: '发生地点',
  },
  {
    title: '车牌号',
    dataIndex: '车牌号',
  },
  {
    title: '驾驶员',
    dataIndex: '驾驶员',
  },
  {
    title: '处理状态',
    dataIndex: '处理状态',
  },
]

//事件查询
const QueryEvent = () => {
  queryBox(map)
}

//生成统计图标
const createChartsByEvent = () => {
  evisible.value = true
  var myChart
  setTimeout(() => {
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(main.value)
    // console.log(myChart)
    myChart.setOption(option)
  }, 1000)
  //echarts数据
  let data1 = ref(0)
  let data2 = ref(0)
  let data3 = ref(0)
  let data4 = ref(0)
  let data5 = ref(0)
  let data6 = ref(0)
  console.log(data, 'niahio')
  data.map((item) => {
    if (item.事件类型 == '碰撞') {
      return (data1.value += 1)
    } else if (item.事件类型 == '刮擦') {
      return (data2.value += 1)
    } else if (item.事件类型 == '失火') {
      return (data3.value += 1)
    } else if (item.事件类型 == '碾压') {
      return (data4.value += 1)
    } else if (item.事件类型 == '翻车') {
      return (data5.value += 1)
    } else if (item.事件类型 == '其他') {
      return (data6.value += 1)
    }
  })
  var option = {
    legend: {
      top: 'bottom',
    },
    tooltip: {
      trigger: 'item',
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: false },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: '事件统计图',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        center: ['50%', '50%'],
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold',
          },
        },
        itemStyle: {
          borderRadius: 8,
        },
        data: [
          { value: data1.value, name: '碰撞' },
          { value: data2.value, name: '刮擦' },
          { value: data3.value, name: '失火' },
          { value: data4.value, name: '碾压' },
          { value: data5.value, name: '翻车' },
          { value: data6.value, name: '其他' },
        ],
      },
    ],
  }
}

mitt.on('QueryEvent', QueryEvent) //监听查询事件
onUnmounted(() => {
  mitt.off('QueryEvent', QueryEvent)
})
</script>

<style scoped>
#main {
  width: 450px;
  height: 400px;
}
</style>
